<template>
  <div>
    <div class="back" @touchend="backTouch"></div>
    <div class="navOverflow">
      <div class="nav" v-if="picbookType!=='recommend'">
        <div class="type" v-for="(type,index) in typeNav" :style="typeStyle(type)" @touchend="navTouch(type)"
          :key="index">{{type}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex"
export default {
  data() {
    return {
      typeNav: ["乐学园", "悦读馆", "活泼猴"]
    }
  },
  computed: {
    typeStyle(type) {
      return function (type) {
        const scale = this.picbookType === type ? 1.2 : 1,
          color = this.picbookType === type ? "white" : "rgb(220, 135, 16)",
          background = this.picbookType === type ? "newList/选中分类.png" : "newList/未选中分类.png"
        return {
          transform: "scale(" + scale + ")",
          color: color,
          background: "url(" + this.variable.STATICE_URLTITLE + background + ")0 0/100% 100%"
        }
      }
    },
    ...mapGetters("picbookListStatus", {
      picbookType: "getPicbookType"
    })
  },
  methods: {
    //点击回到推荐绘本
    backTouch: function () {
      this.touchMusic()
      this.setLoading({
        callback: () => {
          this.$router.push({ path: "/recommendList" })
        }
      })
    },
    navTouch: function (type) {
      this.clickMusic()
      this.setListPage(0)
      this.setPicbookType(type)
    },
    ...mapActions("mainStatus", ["setPopup", "setLoading"]),
    ...mapActions("picbookListStatus", ["setPicbookType", "setListPage"])
  }
}
</script>

<style lang="stylus" scoped>
.back
  background url($urlTitle + 'icon/icon-返回.png') 0 0 / 100% 100%
  $coord('WHLT', 11vh, 10.8vh, 1rem, -13vh)
.navOverflow
  $coord('WHRT', 20rem, 2.5rem, 3.5rem, -2.23rem)
  overflow hidden
.nav
  position absolute
  width 100%
  height 100%
  .type
    float right
    width 4rem
    height 1.8rem
    margin 0.85rem 0.25rem 0rem 0.3rem
    transform-origin 50% 100%
    transition all 0.2s
    $alignCenter()
    font-size 0.75rem
    padding-top 0.5rem
    box-sizing border-box
</style>
